<template>
  <div>
    <div class="banner-container">
      <swiper
        class="banner"
        :options="swiperListOption"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="item in swiperList">
          <img style="width: 100%;cursor: pointer;height: 440px;" :data-id="item.id" :src="item.adImagePath" alt="">
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination1"></div>
    </div>
    <div class="login-box-container">
      <div class="login-container" v-if="!$store.state.user.token">
        <Login :title="'欢迎登录'"/>
      </div>
      <div class="account-container" v-else>
        <UserInfo/>
      </div>
    </div>

    <div class="indexBg">
      <div class="select-course-filter">
        <img src="~@assets/images/select-course-filter.png" alt="">
      </div>

      <div class="signUp">
        <div v-for="item in adsList" @click="toSwiper(item)">
            <img :src="item.adImagePath" alt="">
        </div>
      </div>

      <div class="news">
        <div class="announcements">
          <header>
            <h1>通知公告</h1>
            <span @click="$router.push('/notice')">更多<i class="el-icon-arrow-right"></i> </span>
          </header>
          <section>
            <ul>
              <li v-for="item in noticeList" :key="item.id" @click="toDetail(item.id,'notice')" >
                <span :title="item.title" class="item ellipsis-one">{{item.title}}</span>
              </li>
            </ul>
          </section>
        </div>
        <div class="announcements">
          <header>
            <h1>政策法规</h1>
            <span @click="$router.push('/officialtrainingAdmin')">更多<i class="el-icon-arrow-right"></i> </span>
          </header>
          <section>
            <ul>
              <li v-for="item in officialtrainingList" :key="item.id" @click="toDetail(item.id,'officialtrainingAdmin')">
                <span :title="item.title" class="item ellipsis-one">{{item.title}}</span>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </div>




    <div class="recommend-course-container">
      <div class="recommend-course clearfix">
        <header>
          <h1>推荐课程</h1>
         <!-- <span @click="$router.push('/officialtrainingAdmin')">更多<i class="el-icon-arrow-right"></i> </span>-->
          <!--<img src="~@assets/images/more.png" alt="">-->
        </header>
        <section >
          <ul class="clearfix">
            <li v-for="item  in recommendCourseList" :key="item.id">
              <div class="course-img" @click="toClass(item.id)">
                <img src="~@assets/images/course_login.png" v-real-img="item.picPath" alt="">
              </div>
              <div class="bottom">
                <div class="title ellipsis-one" :title="$utils.unEscapeHTML(item.name)" @click="toClass(item.id)">
                  {{$utils.unEscapeHTML(item.name)}}
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <span>{{item.teacherName}}</span>
                  <span> {{item.credit}}学时</span>
                </div>
              </div>
            </li>
          </ul>
        </section>
      </div>
    </div>
    <div class="commone-asked-container">
      <div class="commone-asked">
        <header>
          <h1>帮助中心</h1>
        </header>
        <section>
          <div style="cursor:pointer;" v-show="$store.state.app.footer.certificateQueryOpen == 1"><img @click="toCertificate" src="~@assets/images/certificateImg.png" alt=""></div>
          <div v-if="$store.state.app.footer.customerPhones">
            <div v-for="(item,index) in $store.state.app.footer.customerPhones" :key="index">
              <span>{{item}}</span>
            </div>
          </div>
          <ul>
            <li>
              <h3 @click="$router.push('/help-center')">培训须知</h3>
              <p><a @click="$router.push('/help-center')" :title="$store.state.app.footer.trainingInstructionsSummary" class="ellipsis-two">{{$store.state.app.footer.trainingInstructionsSummary}}</a></p>
            </li>
            <li>
              <h3 @click="toHelpCenter('2')">操作说明</h3>
              <p><a @click="toHelpCenter('2')" :title="$store.state.app.footer.operatingSummary"  class="ellipsis-two">{{$store.state.app.footer.operatingSummary}}</a></p>
            </li>
          </ul>
        </section>

      </div>
    </div>


    <!--飘窗-->
    <div id="Div2" style="position:relative;z-index: 99999;" v-show="pcImgList.length !== 0 && pcImgFlag">
      <img style="cursor:pointer;"  @click="openUrl(pcImgList[0].adOpenWay,pcImgList[0].adUrl)"
           :src="pcImgList[0] &&pcImgList[0].adImagePath" alt="">
      <i style="position:absolute;right: 10px;top: 10px;cursor:pointer;font-size: 18px;"
         class="el-icon-circle-close el-icon"  @click="pcImgFlag = false"></i>
    </div>
  </div>
</template>

<script>
  import index from "./indexjs";

  export default {
    ...index
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "index";
</style>
